<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,initial-scale=1.0"/>
    <title>天鼎投资·与牛共舞</title>
    <link rel="stylesheet" type="text/css" href="css/styleUI.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="page" class="uf uf-ver">
    <div id="header" class="uf uf-ac">
        <a href="index.html" class="uf-f nav">首页</a>
        <a href="calendar.html" class="uf-f nav">财日历</a>
        <a href="liveVideo.html" class="uf-f nav hot active">牛直播</a>
        <a href="achievement.html" class="uf-f nav">晒战绩</a>
        <a href="team.html" class="uf-f nav">团队介绍</a>
    </div>

    <div id="container" class="uf-f u-scroll">

        <div class="uf liveType">
            <a href="liveVideo.html" class="uf-f type active">视频直播</a>
            <a href="liveText.html" class="uf-f type">文字直播</a>
        </div>

        <div class="videoDiv">
            <video onstalled="stalled()" src="http://play.zhibo.yngw518.com/live/weixin.m3u8" onplay="videoBy(this,1)"
                   onpause="videoBy(this,0)" onclick="videoPlay(this)"
                   poster="image/static/liveVideoPoster2.jpg"
                   x-webkit-airplay="true"
                   webkit-playsinline="true"
                   playsinline="true"
                   x5-video-player-type="h5"
                   x5-video-player-fullscreen="true"></video>
            <div class="videoBy playCenter"></div>
            <div class="videoBy bottom">
                <div class="videoInfo uf uf-ac uf-pj">
                    <div class="largeSize">牛人解盘</div>
                    <div class="lessSize" style="padding-left:15%;">主讲：牛道人</div>
                    <div id="videoStatus" class="lessSize winColor">直播中</div>
                </div>
            </div>
        </div>

        <div class="liveSug">
            <div class="ub line">
                <div class="title">本期主题：</div>
                <div class="ub-f">十四个字十四个字十四个字十四</div>
            </div>
            <div class="uf uf-ac uf-pj line">
                <span class="title">下节预告</span>
                <span>14:30-15:30</span>
                <span class="warnFont">股道争锋</span>
                <span class="lessSize">主讲：牛道人</span>
            </div>
        </div>
        <div class="courseTable">
            <div class="title">直播时间表</div>
            <style>
                .liveCourse {
                    width: 100%;
                    border-collapse: collapse;
                    text-align: center;
                }

                .liveCourse tr {
                    height: 40px;
                    border-bottom: 1px solid red;
                }

                .liveCourse tr.hl {
                    background-color: red;
                    color: #ffffff;
                }
            </style>
            <table class="liveCourse">
                <tr>
                    <td>10:00-10:30</td>
                    <td>周一至周五</td>
                    <td>牛股速递</td>
                    <td>孙腾</td>
                </tr>
                <tr>
                    <td>10:30-11:30</td>
                    <td>周一至周五</td>
                    <td>高手解盘</td>
                    <td>闵庆华</td>
                </tr>
                <tr>
                    <td>13:30-14:30</td>
                    <td>周一至周五</td>
                    <td>与牛共舞</td>
                    <td>魏丹丹</td>
                </tr>
                <tr>
                    <td>14:30-15:00</td>
                    <td>周一至周五</td>
                    <td>金股建仓</td>
                    <td>孙腾</td>
                </tr>
                <tr>
                    <td>15:00-19:00</td>
                    <td>周一至周五</td>
                    <td>经典课程</td>
                    <td>节目录播</td>
                </tr>
                <tr>
                    <td>19:00-19:45</td>
                    <td>周一至周五</td>
                    <td>赢家有道</td>
                    <td>闵庆华</td>
                </tr>
                <tr>
                    <td>19:45-20:30</td>
                    <td>周一至周四</td>
                    <td>股海争锋</td>
                    <td>孙腾</td>
                </tr>
            </table>
        </div>
        <!--    <div class="courseTable">-->
        <!--        <div class="title">直播时间表</div>-->
        <!--        <div class="uf uf-pja">-->
        <!--            <div class="ub ub-pc ub-ac course">牛人<br>解盘</div>-->
        <!--            <div class="ub ub-pc ub-ac course active">股道<br>争锋</div>-->
        <!--            <div class="ub ub-pc ub-ac course">赢在<br>开盘</div>-->
        <!--            <div class="ub ub-pc ub-ac course">早盘<br>直击</div>-->
        <!--            <div class="ub ub-pc ub-ac course">操盘<br>论市</div>-->
        <!--        </div>-->
        <!--        <div class="courseDiv">-->
        <!--            <div class="courseView">-->
        <!--                <div class="uf uf-ac uf-pj line"><span>星期一、三、五</span><span>15:50 — 16:00</span><span>牛道人</span></div>-->
        <!--                <div class="uf uf-ac uf-pj line"><span>星期一至星期五</span><span>16:00 — 16:30</span><span>孙&nbsp;&nbsp;&nbsp;&nbsp;腾</span>-->
        <!--                </div>-->
        <!--            </div>-->
        <!--            <div class="courseView show">-->
        <!--                <div class="uf uf-ac uf-pj line">-->
        <!--                    <span>星期一至星期五</span><span>19:15 — 19:45</span><span>牛道人</span></div>-->
        <!--                <div class="uf uf-ac uf-pj line"><span>星期一至星期四</span><span>19:45 — 20:30</span><span>孙&nbsp;&nbsp;&nbsp;&nbsp;腾</span></div>-->
        <!--            </div>-->
        <!--            <div class="courseView">-->
        <!--                <div class="uf uf-ac uf-pj line"><span>星期一至星期五</span><span>09:15 — 10:00</span><span>孙&nbsp;&nbsp;&nbsp;&nbsp;腾</span>-->
        <!--                </div>-->
        <!--            </div>-->
        <!--            <div class="courseView">-->
        <!--                <div class="uf uf-ac uf-pj line"><span>星期一至星期五</span><span>10:00 — 11:30</span><span>闵庆华</span></div>-->
        <!--            </div>-->
        <!--            <div class="courseView">-->
        <!--                <div class="uf uf-ac uf-pj line"><span>星期一至星期五</span><span>14:00 — 15:00</span><span>邵道明</span></div>-->
        <!--            </div>-->
        <!--        </div>-->
        <!--    </div>-->

    </div>

    <div id="footer" class="uf">
        <a href="index.html" class="uf-f uf uf-ver uf-ac uf-pc">
            <div class="footIcon"></div>
            资讯</a>
        <a href="liveVideo.html" class="uf-f uf uf-ver uf-ac uf-pc active">
            <div class="footIcon"></div>
            直播室</a>
        <a href="vip.html" class="uf-f uf uf-ver uf-ac uf-pc">
            <div class="footIcon"></div>
            VIP专享</a>
    </div>

</div>
<script type="text/javascript" src="js/zepto.min.js"></script>
<script type="text/javascript">
    //播放时隐藏videoBy,显示控制器
    function videoBy(ele, isShow) {
        var $ele = $(ele);
        var $videoBy = $ele.parent().find('.videoBy');
        if (isShow == 0) {
            //暂停事件
            $videoBy.show();
            $ele.removeAttr("controls");
        } else {
            //播放事件
            $videoBy.hide();
            $ele.attr("controls", "controls");
            $("#videoStatus").html("直播中").addClass("winColor").removeClass("warnColor");
        }
    }

    //播放或暂停视频
    function videoPlay(ele) {
        var video = ele;
        if (video.paused) {
            video.play();
        } else {
            video.pause();
        }
    }

    //当浏览器尝试获取媒体数据，但数据不可用时(直播节结束了)
    function stalled() {
        alert("直播已结束！");
        $("#videoStatus").html("已结束").removeClass("winColor").addClass("warnColor");
    }

    //点击课程
    $(".course").on('click', function () {
        var $this = $(this);
        if ($this.hasClass('active'))return;
        var $plane = $(this).parents('.courseTable');
        //活跃状态
        var modelLis = $plane.find(".course");
        if (modelLis && modelLis.length) {
            $.each(modelLis, function (index, item) {
                $(item).removeClass("active");
            });
            $this.addClass("active");
        }
        //课程表
        var viewLis = $plane.find(".courseView");
        if (viewLis && viewLis.length) {
            $.each(viewLis, function (index, item) {
                $(item).removeClass("show");
            });
            var index = $this.index();
            $(viewLis[index]).addClass('show');
        }
    })

    //检测当前时间段是否在直播中
    function checkCourseTimer() {

        $(".liveCourse tr").each(function (index, item) {
            var timer = $(item).find("td:first-child").html();
            var str = timer.split("-");
            var beginTime = $.trim(str[0]);
            var endTime = $.trim(str[1]);
            if (time_range(beginTime, endTime)) {
                $(item).addClass("hl");
            }
        });

        function time_range(beginTime, endTime) {
            var strb = beginTime.split(":");
            if (strb.length != 2) {
                return false;
            }

            var stre = endTime.split(":");
            if (stre.length != 2) {
                return false;
            }

            var b = new Date();
            var e = new Date();
            var n = new Date();

            b.setHours(strb[0]);
            b.setMinutes(strb[1]);
            e.setHours(stre[0]);
            e.setMinutes(stre[1]);

            if (n.getTime() - b.getTime() > 0 && n.getTime() - e.getTime() < 0) {
                return true;
            } else {
                return false;
            }
        }

    }
    checkCourseTimer();
    //定时器
    setInterval(checkCourseTimer, 1000*60);

</script>
</body>
</html>